<template>
  <div id="app">
    <keep-alive>
      <router-view
        :key="$route.path"
        v-if="
          $route.path.includes('/BookInfo') ||
          $route.path.includes('/CatalogCon')
        "
      ></router-view>
      <router-view v-else></router-view>
      <!-- <router-view v-if="$route.path.includes('/BookInfo')"></router-view>
    <router-view></router-view> -->
    </keep-alive>

    <van-tabbar
      v-model="active"
      active-color="#ee0a24"
      class="bottom-nav"
      v-if="$route.meta.bottomShow"
    >
      <van-tabbar-item icon="shopping-cart-o" to="/bookshelf">
        <template #icon>
          <van-icon
            class-prefix="icon"
            class="iconfont"
            name="shujia"
            size="16px"
            style="padding: 5px"
          />
        </template>
        书架
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="pushNav">
        <template #icon>
          <van-icon
            class-prefix="icon"
            class="iconfont"
            name="yemian"
            size="16px"
            style="padding: 5px"
            background="red"
          />
        </template>
        书城
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/discover">
        <template #icon>
          <van-icon
            class-prefix="icon"
            class="iconfont"
            name="xingqiu"
            size="16px"
            style="padding: 5px"
            background="red"
          />
        </template>
        分类
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/HomePage">
        <template #icon>
          <van-icon
            class-prefix="icon"
            class="iconfont"
            name="denglu"
            size="16px"
            style="padding: 5px"
            background="red"
          />
        </template>
        {{ user && user.name != "default" ? user.name : "未登录" }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      active: 1,
    };
  },
  created() {
    //根据路由获取navbar状态
      switch (location.hash) {
        case "#/bookshelf":
          this.active = 0;
          break;
        case "#/StoreChoiceness":
          this.active = 1;
          break;
        case "#/discover":
          this.active = 2;
          break;
        case "#/HomePage":
          this.active = 3;
          break;
      }

    let Defaultuser = [
      {
        name: "default",
        password: "default",
        id: Math.random().toString(16).substr(2, 20),
        bookshelf: [],
        chapters: [],
      },
    ];
    if (JSON.parse(localStorage.getItem("user"))) {
      //提交到vuex
      let user = JSON.parse(localStorage.getItem("user"));
      user = user.find((item) => item.name == "default");
      this.$store.commit("addUser", user);
    } else {
      //创建默认账号
      localStorage.setItem("user", JSON.stringify(Defaultuser));
      this.$store.commit("addUser", Defaultuser[0]);
    }
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    ...mapMutations(["addUser"]),
    pushNav() {
      this.$router.push(this.$store.state.cacheNav);
    },
  },
};
</script>


<style lang="less" >
#app {
  font-size: 12px !important;
}
.van-tabbar {
  z-index: 100 !important;
}
body {
  // position: fixed;
  // width: 100%;
  // height: 1000px;
}
//  .my-swipe .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
//   }
</style>
